import React from 'react'
// 导入本地静态资源图片
import Avator from '../images/02.png'
class Form extends React.Component {
    state={
        // 定义评论的状态
         content: 'jjjkl',
        }
  // 修改文本域的值
  changeText = (e) => {
    console.log(e.target.value)
    // 1.拿到文本域的值
    this.setState({
      content: e.target.value,
    })
   }
   change = () => {
    this.props.publish(this.state.content)  
    this.setState({
      content: ''
    })
   }
    render() {
        console.log(this.props)
        return (
         <div>
          {/* 添加评论 */}
          <div className="comment-send">
            <div className="user-face">
              <img className="user-head" src={ Avator } alt="" />
            </div>
            <div className="textarea-container">
              <textarea
                cols="80"
                rows="5"
                placeholder="发条友善的评论"
                className="ipt-txt"
                value={this.state.content}
                onChange={this.changeText}
              />
              <button className="comment-submit" onClick={ this.change }>
                发表评论
              </button>
            </div>
            <div className="comment-emoji">
              <i className="face" />
              <span className="text">表情</span>
            </div>
          </div>
         </div>
        )
    }
}
export default Form